
import React from 'react'
import { Row, Col, Form, Input, Typography, Select, Button } from "antd"
import { reg } from '../../utils/validate'
import { UserOutlined, LockOutlined, PhoneOutlined, IdcardOutlined, RocketOutlined } from '@ant-design/icons';
// import { roleList, toast } from '../../utils/common';
import { observer } from "mobx-react"
import { ajax } from '../../api';
const { Title } = Typography
const { Option } = Select;
export default function UserAdd({ history }: any) {
    const [form] = Form.useForm()

    const onFinish = async (value: any) => {

        console.log(value);


        let { code, result }: any = await ajax.vipregister(value)

        if (code == 200) {
            history.push("/main/vip/list")
        }

    }
    const onFinishFailed = () => {
        // toast.error("请填写有效的用户信息");
    }
    const resetData = () => {
        form.resetFields()
    }
    const handleChange = (value: any) => {
        console.log(`selected ${value}`);
    }
    return (
        <div style={{ width: "100%", height: "100%", boxShadow: '0px 0px 1px  1px #b5b5b5', borderRadius: '5px', padding: 16, }}>
            <Title level={4}> 添加会员 </Title>
            <Row style={{ paddingLeft: "200px" }}>
                <Col>
                    <Form
                        name="basic"

                        initialValues={{
                            password: "qwe123",
                            gender: "男"
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        form={form}
                    >
                        <Form.Item
                            label="用户名称"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            label="邮&emsp;&emsp;箱"
                            name="email"
                            rules={[{ required: true, message: '请输入邮箱!' }, {
                                pattern: reg.email,
                                message: '请输入正确的邮箱'
                            }]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱" />
                        </Form.Item>
                        <Form.Item
                            label="手机号码"
                            name="phone"
                            rules={[
                                { required: true, message: '请输入手机号!' },
                                {
                                    pattern: reg.phone,
                                    message: '请输入正确的手机号码'
                                }
                            ]}
                        >

                            <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                        </Form.Item>

                        <Form.Item
                            label="&emsp;性&emsp;&emsp;别"
                            name="gender"
                        >
                            <Select defaultValue="男" style={{ width: 120 }} onChange={handleChange}>
                                <Select.Option value="男">男</Select.Option>
                                <Select.Option value="女">女</Select.Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="年&emsp;&emsp;龄"
                            name="age"
                            rules={[
                                { required: true, message: '请输入年龄!' },
                            ]}
                        >

                            <Input prefix={<IdcardOutlined />} placeholder="请输入年龄" />
                        </Form.Item>

                        <Form.Item
                            label="登录密码"
                            name="password"
                            rules={[
                                { required: true, message: '请输入密码!' },

                            ]}
                        >

                            <Input disabled prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" />
                        </Form.Item>

                        <Form.Item >
                            <Row>
                                <Col span={11} >
                                    <Button type="primary" block htmlType="submit"  > 添加用户</Button>
                                </Col>
                                <Col span={11} offset={2}>
                                    <Button type="default" block danger onClick={resetData} > 重置 </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div >
    )
}
